import { currentData } from "./currentdata";
import { project } from "./project";
import * as path from 'path'
import { editor } from "./mainboard";



type MapItem = { x: number, y: number, tile: number }

class MapPropertyContainer {

    root: HTMLElement;

    tileSelector: HTMLSelectElement;

    constructor(private mapEditor: MapEditor) {
        this.root = document.createElement("div");
        // this.root.innerHTML = "属性编辑2";

        const select = document.createElement("select");
        const arr:any[] =mapEditor.MapTile ;
        for (let v of arr) {
            const option = document.createElement("option");
            select.appendChild(option);
            option.value = v.id.toString();
            option.innerText = v.name;
        }
        this.root.appendChild(select)
        this.tileSelector = select;

    }

    setItem(item: MapItem) {
        this.tileSelector.value = item.tile.toString();
        this.tileSelector.onchange = () => {
            item.tile = parseInt(this.tileSelector.value);
            this.mapEditor.update();
        }


    }


}


export class MapEditor {


    data: any;
    config: any;
    MapTile:any

    constructor(private root: HTMLElement) {
        
    }

    update() {
        while (this.root.hasChildNodes()) {
            this.root.removeChild(this.root.childNodes[0]);
        }
        editor.show();
    }


    show() {
       
        this.data = currentData.getCurrentData();
         this.config =this.data.map[0].location;
        this.MapTile = this.data.mapTile;
        const TILE_SIZE = 64;



        for (let item of this.config) {

            const img = document.createElement("img");
            let imgUrl = ""
          
            for (let mapImageTile of this.MapTile) {
               
                   if (item.tile == mapImageTile.id) {
                         imgUrl = mapImageTile.image;
                }    
              
               
            }
                    
                   
                   
               
               
                   
                
                    
            
            img.src = path.join(project.projectRoot, imgUrl);
            img.onclick = () => {
                mapPropertyContainer.setItem(item);
            }
            
            this.root.appendChild(img)

            setPosition(img, TILE_SIZE * item.x + 60, TILE_SIZE * item.y + 60);
        }
        const mapPropertyContainer = new MapPropertyContainer(this);
        this.root.appendChild(mapPropertyContainer.root);
        setPosition(mapPropertyContainer.root, 700, 100);
    }

    hide() {
        // while (this.root.hasChildNodes()) {
        //     this.root.removeChild(this.root.childNodes[0]);
        // }
        this.root.innerHTML = "";
    }

}

function setPosition(node: HTMLElement, x: number, y: number) {

    const parent = node.parentElement;
    if (parent) {
        // const newX = x;
        // const newY = y; ??????
        const newX = parent.offsetLeft + x;
        const newY = parent.offsetTop + y;
        node.style.position = "absolute";
        node.style.left = newX + "px";
        node.style.top = newY + "px";
    }



}